<template>
  <el-row>
    <h3>请勾选标识卡字段</h3>
    <p>单独勾选设备二维码,则只会下载二维码</p>
    <el-col :span="8">
      <el-checkbox-group v-model="checkedGroups" :max="11">
        <el-col>
          <el-checkbox
            v-for="item in groups"
            :label="item.key"
            :key="item.key"
            style="display: block"
            >{{ item.name }}</el-checkbox
          >
        </el-col>
      </el-checkbox-group>
    </el-col>
    <el-col class="identify-content" :span="16">
      <!-- <el-form class="border double">
        <p style="text-align: center">设备标识卡</p>
        <table
          border="1"
          cellspacing="0"
          width="100%"
          style="text-align: center"
        >
          <tr>
            <th>设备名称</th>
            <td>
              {{ checkedGroups.includes("deviceName") ? "高频淬火机床" : "" }}
            </td>
            <td rowspan="2" colspan="2"><img :src="src" /></td>
          </tr>
          <tr>
            <th>固定资产编号</th>
            <td>{{ checkedGroups.includes("assetCode") ? "VC082026" : "" }}</td>
          </tr>

          <tr>
            <th>设备编号</th>
            <td>
              {{ checkedGroups.includes("assetNumber") ? "C082026" : "" }}
            </td>
            <th>设备类别</th>
            <td>{{ checkedGroups.includes("deviceClass") ? "A" : "" }}</td>
          </tr>
          <tr>
            <th>设备分类</th>
            <td>{{ checkedGroups.includes("typeName") ? "数控机床" : "" }}</td>
            <th>使用部门</th>
            <td>
              {{ checkedGroups.includes("organName") ? "设备管理部" : "" }}
            </td>
          </tr>
          <tr>
            <th>责任人</th>
            <td>{{ checkedGroups.includes("responsible") ? "王婵" : "" }}</td>
            <th>投产日期</th>
            <td>
              {{ checkedGroups.includes("productDate") ? "2008-12-22" : "" }}
            </td>
          </tr>
          <tr>
            <th>型号</th>
            <td>{{ checkedGroups.includes("model") ? "ZTVC150" : "" }}</td>
            <th>出厂编号</th>
            <td>
              {{
                checkedGroups.includes("factoryNumber") ? "213455677890" : ""
              }}
            </td>
          </tr>
        </table>
        <p style="text-align: center">公司名称</p>
      </el-form> -->
      <img :src="qcode" />
    </el-col>
  </el-row>
</template>
<script>
import src from "./qrcode.png";
import qcode from "./qcode1.png";
console.log(src);
const groups = [
  //   "设备二维码",
  //   "设备名称",
  //   "固定资产编码",
  //   "设备编号",
  //   "设备类别",
  //   "设备分类",
  //   "使用部门",
  //   "责任人",
  //   "投产日期",
  //   "型号",
  //   "出厂编号",

  {
    name: "设备二维码",
    key: "qrcode",
  },
  {
    name: "设备名称",
    key: "deviceName",
  },
  {
    name: "固定资产编码",
    key: "assetCode",
  },
  {
    name: "设备编号",
    key: "assetNumber",
  },
  {
    name: "设备类别",
    key: "deviceClass",
  },
  {
    name: "设备分类",
    key: "typeName",
  },
  {
    name: "使用部门",
    key: "organName",
  },
  {
    name: "责任人",
    key: "responsible",
  },
  {
    name: "投产日期",
    key: "productDate",
  },
  {
    name: "型号",
    key: "deviceModel",
  },
  {
    name: "出厂编号",
    key: "factoryNumber",
  },
];
export default {
  data() {
    return {
      checkedGroups: [],
      groups: groups,
      src: src,
      qcode: qcode,
    };
  },
};
</script>
<style lang="scss">
// .el-dialog__body {
//   padding: 0 20px;
// }
.identify-content {
  padding: 10px;
  border: 1px solid #eee;
}
</style>